<style scoped>
  .layout {
    background: #fff;
    width: 100%;
  }

  .layout-logo {
    float: right;
    position: relative;
    top: 5px;
    right: 30px;
    border-radius: 5px;
  }

  .layout-nav {
    width: 420px;
    margin: 0 auto;
  }
  .layout-content {
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    height: 100%;
    background: #fff;
    border-radius: 4px;
  }
</style>
<template>
  <div class="layout">
    <Menu mode="horizontal" theme="dark" active-name="1" @on-select="getTitleType">
      <div class="layout-logo">
        <Dropdown trigger="click" style="" @on-click="personCenter">
          <a href="javascript:void(0)" style="color: #fff;">
            {{UserName}}
            <Icon type="arrow-down-b"></Icon>
          </a>
          <Dropdown-menu slot="list">
            <Dropdown-item name="setting">用户设置</Dropdown-item>
            <Dropdown-item name="nickname">修改昵称</Dropdown-item>
            <Dropdown-item name="logout">退出</Dropdown-item>
          </Dropdown-menu>
        </Dropdown>
      </div>
      <div class="layout-nav">
        <Menu-item name="1" v-if="level==1">
          <Icon type="ios-navigate"></Icon>
          游戏
        </Menu-item>
        <Menu-item name="2">
          <Icon type="ios-keypad"></Icon>
          导航二
        </Menu-item>
        <Menu-item name="3">
          <Icon type="ios-analytics"></Icon>
          用户
        </Menu-item>
        <Menu-item name="4">
          <Icon type="ios-paper"></Icon>
          订单
        </Menu-item>
      </div>
    </Menu>
    <div class="layout-content">
      <Row>
        <i-col span="3" style="height: 100%">
          <Menu active-name="1-2" style="height: 100%" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                导航一
              </template>
              <Menu-item name="1-1">选项 1</Menu-item>
              <Menu-item name="1-2">选项 2</Menu-item>
              <Menu-item name="1-3">选项 3</Menu-item>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                导航二
              </template>
              <Menu-item name="2-1">选项 1</Menu-item>
              <Menu-item name="2-2">选项 2</Menu-item>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                导航三
              </template>
              <Menu-item name="3-1">选项 1</Menu-item>
              <Menu-item name="3-2">选项 2</Menu-item>
            </Submenu>
          </Menu>
        </i-col>
        <i-col span="21" style="padding-left: 20px;padding-right: 20px">
          <router-view>
          </router-view>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
  import utils from '../../utils/user'
  export default {
    name: 'main',
    data(){
      return {
        level: utils.getLevel(),
        UserName: '',
        nickname: ''
      }
    },
    watch: {
      // shopNo改变时重新加载
      /*shopNo:function(newShopNo){
       this.loadShop();
       }*/
    },
    methods: {
      getTitleType(name){
        if (name === '4') {
          this.$router.push('/main/order')
        } else if (name === '2') {
          this.$router.push('/main')
        } else if (name === '3') {
          this.$router.push('/main/user')
        }
      },
      personCenter(type){
        if (type === 'logout') {
          this.$router.push('/login')
          utils.clearToken()
        } else if (type === "setting") {
          this.$router.push('/main/setting')
        } else if (type === 'nickname') {
          this.$Modal.confirm({
            render: (h) => {
              return h('Input', {
                props: {
                  value: this.nickname,
                  autofocus: true,
                  placeholder: '请输入昵称'
                },
                on: {
                  input: (val) => {
                    this.nickname = val;
                  }
                }
              })
            },
            onOk: () => {
              if (this.nickname.length > 8) {
                this.$Message.warning('用户名长度不能大于8位')
                return
              }
              var params = new URLSearchParams();
              params.append('nickname', this.nickname);
              this.axios.put('user/change_name', params).then((res) => {
                utils.saveName(this.nickname)
                this.UserName = this.nickname
                this.$Message.success('修改昵称成功')
              })
            }
          })
        }
      },

    },
    mounted(){
      /* let json = JSON.parse(this.$route.query.params)  json.name*/
      this.UserName = utils.getName()
    }
  }
</script>
